import { Button, Card, Checkbox, Form, Input, message } from 'antd'
import { useDispatch } from 'react-redux'
import { useHistory, useLocation } from 'react-router-dom'

// action
import { login } from '@/store/actions'
// 导入logo图片
import logo from '@/assets/logo.png'

// 导入样式
import './Login.scss'

export const Login = () => {
  // hooks
  const dispatch = useDispatch()
  const history = useHistory()
  const loaction = useLocation()

  console.log('location', loaction)

  // 状态数据

  // 副作用 useEffect

  // 事件处理
  // 表单提交事件处理
  const onFinish = async (values) => {
    console.log('准备登录', values)
    // 登录，如果登录失败了，该如何处理？
    try {
      await dispatch(login(values.mobile, values.code))
      // 登录成功后跳转到home组件（页面），replace 替换当前访问历史栈。跳转到home后就无法浏览器后退到 /login
      history.replace(loaction.state ? loaction.state.from : '/home')
    } catch (error) {
      // console.log('登录发生错误', error)
      // // 产品一句话，“登录错误，请重试”
      // // message.error('登录错误，请重试')
      // // 服务器的错误。
      // if (error.response) {
      //   message.warn(error.response.data.message)
      // } else {
      //   // 客户端的错误
      //   message.warn('网络错误，请检查你的网络')
      // }
      // // 发送你们公司服务器，要进行错误分析
    }
  }

  return (
    <div className="login">
      <Card
        className="login-card"
        bodyStyle={{
          display: 'flex',
          flexDirection: 'column',
          alignItems: 'center',
        }}
      >
        {/* 图片 */}
        <img className="login-logo" src={logo} alt="login" />
        {/* 表单 */}
        <Form
          initialValues={{ remember: true }}
          validateTrigger={['onChange', 'onBlur']}
          onFinish={onFinish}
          // onFinishFailed={onFinish} // 看需求
          autoComplete={'off'}
        >
          {/* 手机号 */}
          <Form.Item
            name={'mobile'}
            rules={[
              { required: true, message: '请输入手机号' },
              { pattern: /^1[3-9]\d{9}$/, message: '手机号码格式不对' },
            ]}
          >
            <Input size="large" placeholder="请输入手机号" maxLength={11} />
          </Form.Item>

          {/* 验证码 */}
          <Form.Item
            name={'code'}
            rules={[
              { required: true, message: '请输入验证码' },
              { len: 6, message: '验证码需要6位' },
            ]}
          >
            <Input size="large" placeholder="请输入验证码" maxLength={6} />
          </Form.Item>
          {/* checkbox */}
          <Form.Item name={'remember'} valuePropName={'checked'}>
            <Checkbox style={{ color: '#1890ff' }}>
              我已阅读并同意「用户协议」和「隐私条款」
            </Checkbox>
          </Form.Item>
          {/* 提交按钮 */}

          <Form.Item>
            <Button block type="primary" size="large" htmlType="submit">
              登 录
            </Button>
          </Form.Item>
        </Form>
      </Card>
    </div>
  )
}
